<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>创建游戏</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Portal - Bootstrap 5 Admin Dashboard Template For Developers">
    <meta name="author" content="Xiaoying Riley at 3rd Wave Media">
    <link rel="shortcut icon" href="/assets/favicon.ico">

    <script defer src="/assets/js/jquery-2.1.4.js"></script>
    <!-- FontAwesome JS-->
    <script defer src="/assets/plugins/fontawesome/js/all.min.js"></script>

    <!-- App CSS -->
    <link id="theme-style" rel="stylesheet" href="/assets/css/portal.css">

</head>

<input style="display: none" id="uid" th:value="${user.getUid()}">
<body class="app">
<header th:replace="template.html::header"></header><!--//app-header-->

<div class="app-wrapper">

    <div class="app-content pt-3 p-md-3 p-lg-4">
        <div class="container-xl">
            <h1 class="app-page-title">创建游戏</h1>
            <hr class="mb-4">
            <div class="row g-4 settings-section">
                <div class="col-12 col-md-2">
                    <h3 class="section-title">创建新的游戏</h3>
                    <div class="section-intro">剧本号和房间号可以点击左边的剧本列表和房间列表查看.</div>
                </div>
                <div class="col-12 col-md-8">
                    <div class="app-card app-card-settings shadow-sm p-4">
                        <div class="app-card-body">
                            <div class="settings-form">
                                <div class="mb-3">
                                    <label for="sid" class="form-label">剧本号</label>
                                    <input type="number" class="form-control" id="sid" disabled required>
                                    <button onclick="openPanel('scripts')" class="btn app-btn-primary">选择剧本</button>
                                </div>
                                <div class="mb-3">
                                    <label for="hid" class="form-label">房间号</label>
                                    <input type="number" class="form-control" id="hid" disabled required>
                                    <button onclick="openPanel('houses')" class="btn app-btn-primary">选择房间</button>
                                </div>
                                <div class="mb-3">
                                    <label for="start" class="form-label">开始时间</label>
                                    <input type="datetime-local" class="form-control" id="start"
                                           required>
                                </div>
                                <button id="create" class="btn app-btn-primary">创建</button>
                            </div>
                        </div><!--//app-card-body-->
                    </div><!--//app-card-->
                </div>
            </div><!--//row-->
            <hr class="my-4">
        </div><!--//container-fluid-->
    </div><!--//app-content-->
</div><!--//app-wrapper-->
<div id="scripts" class="container-xl container-custom" style="display: none">
    <div class="row g-3 mb-4 align-items-center justify-content-between">
        <div class="col-auto">
            <h1 class="app-page-title mb-0">请选择剧本</h1>
        </div>
        <div class="col-auto">
            <button onclick="closePanel('scripts')" class="btn app-btn-secondary">关闭</button>
        </div>
        <!--//col-auto-->
    </div><!--//row-->
    <div class="row g-4" id="list">
        <div th:each="script : ${scripts}" th:style="${scriptStat.index < 12 ? '' : 'display: none'}"
             class="col-6 col-md-4 col-xl-3 col-xxl-2">
            <div class="app-card app-card-doc shadow-sm h-100">
                <div class="app-card-thumb-holder p-3">
                    <div class="app-card-thumb">
                        <img class="thumb-image" th:src="${script.getFace()}" alt="">
                    </div>
                    <span class="badge bg-success" th:text="${script.getType()}"></span>
                    <a class="app-card-link-mask" th:onclick="'choose(' + ${script.getSid()} +', \'script\')'"></a>
                </div>
                <div class="app-card-body p-3 has-card-actions">
                    <h4 class="app-doc-title truncate mb-0">
                        <a th:text="${script.getName()}"></a>
                    </h4>
                    <div class="app-doc-meta">
                        <ul class="list-unstyled mb-0">
                            <li th:text="'评分: ' + ${script.getStarPeople() != 0 ? script.getStar() / script.getStarPeople() : 'NaN'} + '分'"></li>
                        </ul>
                        <ul class="list-unstyled mb-0">
                            <li th:text="'原价: ' + ${script.getPrice()} + '元'"
                                th:style="${user.getPerm().equals('vip') ? 'text-decoration: line-through' : ''}"></li>
                        </ul>
                        <ul th:if="${user.getPerm().equals('vip')}" class="list-unstyled mb-0">
                            <li th:text="'折扣价: ' + ${script.getPrice() * 0.9} + '元'"
                                style="color: red"></li>
                        </ul>
                        <ul class="list-unstyled mb-0">
                            <li th:text="${script.getPlayed()} + '人玩过'"></li>
                        </ul>
                    </div>
                </div><!--//app-card-body-->
            </div><!--//app-card-->
        </div><!--//col-->
    </div><!--//row-->
    <nav class="app-pagination mt-5">
        <ul class="pagination justify-content-center" id="pager"></ul>
    </nav><!--//app-pagination-->
</div>
<div id="houses" class="container-xl container-custom" style="display: none">
    <div class="row g-3 mb-4 align-items-center justify-content-between">
        <div class="col-auto">
            <h1 class="app-page-title mb-0">请选择房间</h1>
        </div>
        <div class="col-auto">
            <button onclick="closePanel('houses')" class="btn app-btn-secondary">关闭</button>
        </div>
        <!--//col-auto-->
    </div><!--//row-->
    <div class="row g-4" id="list-2"></div><!--//row-->
    <div style="display: none" id="house-template" class="col-6 col-md-4 col-xl-3">
        <div class="app-card app-card-doc shadow-sm h-100">
            <div class="app-card-thumb-holder p-3">
                <div class="app-card-thumb">
                    <img class="thumb-image"
                         style="position: absolute; top: 0;bottom: 0;left: 0;right: 0;margin: auto;"
                         src="https://img.51miz.com/Element/00/41/00/30/d5477258_E410030_0ec39f23.png"
                         alt="加载失败">
                </div>
                <span></span>
                <a class="app-card-link-mask"></a>
            </div>
            <div class="app-card-body p-3 has-card-actions">
                <h4 class="app-doc-title truncate mb-0">
                    <a style="cursor: pointer"></a>
                </h4>
            </div><!--//app-card-body-->
        </div><!--//app-card-->
    </div><!--//col-->
</div>
<!-- Javascript -->
<script src="/assets/plugins/popper.min.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.min.js"></script>

<!-- Page Specific JS -->
<script src="/assets/js/app.js"></script>
<script type="text/javascript">
    document.getElementById('create').onclick = function () {
        var game = {}
        game['uid'] = parseInt(document.getElementById('uid').value)
        var sid = document.getElementById('sid').value
        if (sid === '') {
            alert('请选择剧本')
            return
        }
        game['sid'] = sid
        var hid = document.getElementById('hid').value
        if (hid === '') {
            alert('请选择房间')
            return
        }
        game['hid'] = hid
        game['people'] = 1
        var start = document.getElementById('start').value
        if (start === '') game['start'] = new Date()
        else game['start'] = start

        $.ajax({
            url: '/ms/api/participant/joined?uid=' + game['uid'],
            method: 'get',
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                if (result['success']) {
                    alert('创建失败, 你已经加入了游戏')
                    window.location = '/ms/my_game'
                    return
                }
                $.ajax({
                    url: '/ms/api/game',
                    method: 'post',
                    data: JSON.stringify(game),
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    success: function (result) {
                        if (result['success']) window.location = '/ms/my_game'
                        else alert('创建失败')
                    }
                })
            }
        })
    }

    document.getElementById('scripts').onclick = function (event) {
        var target = event.target;
        if (target !== null && target.id === 'scripts')
            closePanel('scripts')
    }
    document.getElementById('houses').onclick = function (event) {
        var target = event.target;
        if (target !== null && target.id === 'houses')
            closePanel('houses')
    }

    function closePanel(target) {
        document.getElementById(target).style.display = 'none'
    }

    function openPanel(target) {
        document.getElementById(target).style.display = ''
    }

    function choose(id, target) {
        if (target === 'script') {
            document.getElementById('sid').value = id
            var list = document.getElementById('list-2')
            list.innerHTML = ''
            $.ajax({
                url: 'api/houses/script?sid=' + id,
                method: 'get',
                dateType: 'json',
                contentType: 'application/json;charset=utf-8',
                success: function (houses) {
                    if (houses === null) return
                    var temp = document.getElementById('house-template')
                    for (let i in houses) {
                        var copy = temp.cloneNode(true)
                        copy.children[0].children[1].children[0].children[0].innerText = '房间号: ' + houses[i]['hid']
                        copy.children[0].children[0].children[1].className = 'badge bg-' + houses[i]['color']
                        copy.children[0].children[0].children[1].innerText = transState(houses[i]['state'])
                        copy.children[0].children[0].children[2].onclick = () => choose(houses[i]['hid'], 'house')
                        copy.style.display = ''
                        copy.style.width = '200px'
                        copy.id = 'house-' + i
                        list.append(copy)
                    }
                }
            })
        } else if (target === 'house') {
            document.getElementById('hid').value = id
        }
        closePanel(target + 's')
    }

    function transState(state) {
        if (state === 'idle') return '空闲'
        return '占用'
    }
</script>
</body>
</html>